<template>
    <view class="head">

        <view class="logo">
            <video :src="videoPrefixL + 6008" autoplay loop muted playsinline :controls="false"
                @click="logoClick"></video>
        </view>
        <view class="meta">
            <view class="navTitle">
                <scroll-view class="nav-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
                    <view class="nav-scroll_box">
                        <!-- 选项卡类别列表 -->
                        <view class="nav-scroll_item" v-for=" (item,index) in navList" :key="index"
                            @click="clickNav(item.sortId)" :style="{color: item.sortId===navCurrent?'rgba(212, 48, 48, 0.5)':'',
                            borderBottom: item.sortId===navCurrent?'3.77rpx solid rgba(212, 48, 48, 0.5)':''}">
                            {{item.sortName}}
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <view class="query" v-if="querySearch">
            <view class="queryColumn">
                <u-search v-model="productName" @change="search" @focus="search" @blur="clearBody" :clearabled="true"
                    placeholder="搜索" :animation="false" :showAction="false" bgColor="rgba(255, 255, 255, 0.8)"
                    borderColor="rgba(212, 48, 48, 0.5)" color="rgba(212, 48, 48, 0.5)"
                    placeholderColor="rgba(212, 48, 48, 0.5)" searchIconColor="rgba(212, 48, 48, 0.5)"
                    height="25.126rpx">

                </u-search>
                <view class="searchList" v-if="showSearchResult">
                    <view class="searchOne" v-for="(item,index) in searchResult" :key="index"
                        @click="searchClick(item.productId)">
                        <u-search :placeholder="`{{item.productName}}`" bgColor="rgba(255, 255, 255, 0.8)"
                            :animation="false" :showAction="false" borderColor="rgba(212, 48, 48, 0.5)"
                            placeholderColor="rgba(220, 41, 41, 0.5)" height="25.126rpx" disabled
                            :searchIcon="`{{item.mainImgId}}`"></u-search>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        listNavs,
        listShopsByProductName
    } from '@/api/header/index.js';
    import {
        listAudios
    } from '@/api/index/index.js';
    export default {
        name: "header",
        data() {
            return {
                imgPrefixL: process.env.VUE_APP_IMG_BASE_URL,
                videoPrefixL: process.env.VUE_APP_VIDEO_BASE_URL,
                // 顶部导航集合
                navList: [],
                // 搜索框
                productName: '',
                searchResult: [],
                showSearchResult: false,
                audioList: [],
            }
        },
        created() {
            this.listAudios()
        },
        methods: {
            getNavList() {
                listNavs({
                    parentId: this.parentId
                }).then(res => {
                    this.navList = res.data
                })
            },
            search(value) {
                if (this.productName != null && this.productName != '') {
                    listShopsByProductName({
                        productName: this.productName
                    }).then(res => {
                        res.data.forEach(item => {
                            let arr = item.mainImgId.split(",");
                            item.mainImgId =
                                this.imgPrefixL + parseInt(arr[0]);
                        });
                        this.searchResult = res.data;
                        this.showSearchResult = true;
                    })
                } else {
                    this.searchResult = [];
                    this.showSearchResult = false;
                }
            },
            clearBody() {
                this.showSearchResult = false;
            },
            logoClick() {
                this.$store.commit('updateMiddleOrShopDetailReveal', true);
                this.$store.commit('updateCategoryAndShopsReveals', true);
            },
            // 点击导航触发事件
            clickNav(sortId) {
                this.playSound()
                this.$store.commit('updateNavCurrent', sortId);
                this.$store.commit('updateMiddleOrShopDetailReveal', true);
                this.$store.commit('updateCategoryAndShopsReveals', true);
            },
            // 点击搜索结果触发事件
            searchClick(productId) {
                this.$store.commit('updateProductId', productId)
                this.$store.commit('updateMiddleOrShopDetailReveal', false)
            },
            listAudios() {
                listAudios({
                    audioType: 0,
                    status: '0'
                }).then(res => {
                    this.audioList = res.data.content
                    this.$store.commit('updateYinXiao', this.audioList);
                })
            },
            playSound() {
                const audioContext = uni.createInnerAudioContext(); // 创建音频上下文
                // 设置音频地址
                audioContext.src = this.videoPrefixL + parseInt(this.audioList[0].url);
                // 播放声音
                audioContext.play();
            },
        },
        computed: {
            parentId() {
                return this.$store.state.parentId;
            },
            navCurrent() {
                return this.$store.state.navCurrent;
            },
            querySearch() {
                return this.$store.state.querySearch;
            },
            yinxiao() {
                return this.$store.state.yinxiao;
            }
        },
        watch: {
            parentId: {
                immediate: true,
                handler(newValue) {
                    this.getNavList();
                }
            }
        },
    }
</script>

<style lang="scss">
    @import "uview-ui/index.scss";

    .head {
        width: 100%;
        height: 52.13rpx;
        background: rgba(255, 255, 255, 0.8);
        border-bottom: 1rpx solid rgba(94, 94, 94, 0.1);
        display: flex;

        .logo {
            width: 51rpx;
            height: 29.522rpx;

            padding-top: 14.447rpx;
            padding-left: 14.447rpx;

            video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: 0;
            }
        }

        .meta {
            width: 282.663rpx;
            height: 42.085rpx;
            padding-top: 10.045rpx;
            margin-left: 26.067rpx;
            display: flex;
            flex-direction: column;
            flex: 1;

            .navTitle {
                width: 100%;
                align-items: center;
                height: 42.085rpx;

                .nav-scroll {
                    flex: 1;
                    overflow: hidden;
                    box-sizing: border-box;

                    .nav-scroll_box {
                        display: flex;
                        align-items: center;
                        flex-wrap: nowrap;
                        box-sizing: border-box;

                        .nav-scroll_item {
                            margin-left: 15.992rpx;
                            margin-right: 15.992rpx;
                            flex-shrink: 1;
                            display: flex;
                            justify-content: center;
                            min-width: 52.815rpx;
                            height: 32.035rpx;
                            line-height: 19.472rpx;
                            font-size: 18.845rpx;
                            font-family: AlimamaDaoLiTiTTF;
                            color: rgba(0, 0, 0, 1);
                        }
                    }
                }
            }
        }

        .query {
            width: 341.708rpx;
            height: 31.407rpx;
            margin-left: 21.356rpx;
            padding-top: 11.306rpx;

            .queryColumn {
                margin-left: 53.392rpx;
                width: 228rpx;
                height: 25.126rpx;
                font-size: 12.562rpx;

                .searchList {
                    border-radius: 15rpx;
                    width: 228rpx;
                    max-height: 255rpx;

                    .searchOne {
                        background: rgba(248, 248, 248, 0.8);
                        border-radius: 15rpx;
                    }
                }
            }
        }
    }
</style>